<link rel="stylesheet"
	th:href="@{/admin/plugins/bootstrap-table/src/bootstrap-table.css}">

<script type="text/javascript"
	th:src="@{/admin/plugins/bootstrap-table/dist/bootstrap-table.min.js}"></script>



<section class="content-header">
	<h1>
		校友栏目 <small>栏目管理</small>
	</h1>
	<ol class="breadcrumb">
		<li><a href="#"><i class="fa fa-dashboard"></i> 后台</a></li>
		<li><a href="#">栏目管理</a></li>
		<li class="active">校友栏目</li>
	</ol>
</section>

<!-- Main content -->
<section class="content">
	<div class="box">
		<div class="box-header with-border">
			<h3 class="box-title">新增栏目</h3>

			<div class="box-tools pull-right">
				<button type="button" class="btn btn-box-tool"
					data-widget="collapse" data-toggle="tooltip" title="Collapse">
					<i class="fa fa-minus"></i>
				</button>

			</div>
		</div>
		<form id="addSchoolmatesCategoryForm" class="form-horizontal">
			<div class="box-body">
				<div class="form-group">
					<label for="addSchoolmatesCategoryForm-name"
						class="col-sm-2 control-label">名 &nbsp;&nbsp;称</label>

					<div class="col-sm-10">
						<input name="name" type="text" class="form-control"
							id="addSchoolmatesCategoryForm-name" />
					</div>
				</div>


			</div>
			<!-- /.box-body -->
			<div class="box-footer">
				<span onclick="submitAddSchoolmatesCategoryForm()"
					class="btn btn-info pull-right">添加
					</button>
			</div>
			<!-- /.box-footer -->
		</form>

	</div>
	<div class="box">
		<div class="box-header with-border">
			<h3 class="box-title">栏目列表</h3>

			<div class="box-tools pull-right">
				<button type="button" class="btn btn-box-tool"
					data-widget="collapse" data-toggle="tooltip" title="Collapse">
					<i class="fa fa-minus"></i>
				</button>

			</div>
		</div>
		<div class="box-body">
			<table class="table table-hover" id="cusTable" data-pagination="true"
				data-show-refresh="true" data-show-toggle="true"
				data-showColumns="true">

				<tbody>
				</tbody>
			</table>
		</div>

		<div class="box-footer"></div>
		<!-- /.box-footer-->
	</div>
	<!-- /.box -->
</section>
<!-- /.content -->
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel">
	<div class="modal-dialog" role="document">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-label="Close">
					<span aria-hidden="true">&times;</span>
				</button>
				<h4 class="modal-title" id="myModalLabel">Modal title</h4>
			</div>
			<div class="modal-body">
				<form>
				<input name="id" id="putSchoolmatesCategoryForm-id" type="hidden">
				<div class="form-group">
					<label for="putSchoolmatesCategoryForm-name"
						class="col-sm-2 control-label">名 &nbsp;&nbsp;称</label>
					
					<div class="col-sm-10">
						<input name="name" type="text" class="form-control"
							id="putSchoolmatesCategoryForm-name" />
					</div>
				</div>
				</form>
			</div>
			<div class="modal-footer" style="margin-top: 20px">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				<span type="button" onclick="updateSchoolmatesCategoryForm()" class="btn btn-primary">Save changes</button>
			</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	var $table = $('#cusTable');
	function initTable() {
		//先销毁表格  
		$table.bootstrapTable('destroy');
		//初始化表格,动态从服务器加载数据  
		$table.bootstrapTable({
			method : "get", //使用get请求到服务器获取数据  
			url : "/schoolmatesCategorys", //获取数据的Servlet地址  
			method : 'get', //请求方式（*）
			toolbar : '#toolbar', //工具按钮用哪个容器
			striped : true, //是否显示行间隔色
			cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
			pagination : true, //是否显示分页（*）
			sortable : true, //是否启用排序
			sortOrder : "asc", //排序方式
			//queryParams: queryParams,//传递参数（*）
			sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
			pageNumber : 1, //初始化加载第一页，默认第一页
			pageSize : 10, //每页的记录行数（*）
			pageList : [ 10, 25, 50, 100 ], //可供选择的每页的行数（*）
			strictSearch : true,
			clickToSelect : true, //是否启用点击选中行
			//height: 460,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
			uniqueId : "id", //每一行的唯一标识，一般为主键列
			cardView : false, //是否显示详细视图
			detailView : false, //是否显示父子表
			columns : [
					{
						field : 'id',
						title : '序号'
					},
					{
						field : 'name',
						title : '名称',
					},
					{
						field : 'operate',
						title : 'Item Operate',
						align : 'center',
						events : {
							'click .edit' : function(e, value, row, index) {
								
								var id = row.id;
								var name = row.name;
								$("#putSchoolmatesCategoryForm-id").val(id);
								$("#putSchoolmatesCategoryForm-name").val(name);
								$('#myModal').modal();
								
							},
							'click .remove' : function(e, value, row, index) {
								$.ajax({
									url : '/admin/schoolmatesCategory',
									type : 'post',
									data : {
										id : row.id,
										_method : 'delete'
									},
									success : function(data) {
										$.notify("删除成功", {
											position : 'top center',
											className : 'success'
										});
										$table.bootstrapTable('remove', {
											field : 'id',
											values : [ row.id ]
										});
									},
									error : function() {
										$.notify("删除失败", {
											position : 'top center',
											className : 'error'
										});
									}
								})

							}
						},
						formatter : operateFormatter
					} ]
		});
	}
	queryParams = function(params) {
		var temp = { //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
			limit : params.limit, //页面大小
			offset : params.offset, //页码
			sdate : $("#stratTime").val(),
			edate : $("#endTime").val(),
			sellerid : $("#sellerid").val(),
			orderid : $("#orderid").val(),
			CardNumber : $("#CardNumber").val(),
			maxrows : params.limit,
			pageindex : params.pageNumber,
			portid : $("#portid").val(),
			CardNumber : $("#CardNumber").val(),
			tradetype : $('input:radio[name="tradetype"]:checked').val(),
			success : $('input:radio[name="success"]:checked').val(),
		};
		return temp;
	};
	$(document).ready(function() {
		//调用函数，初始化表格  
		initTable();

		//当点击查询按钮的时候执行  
		$("#search").bind("click", initTable);
	});

	function operateFormatter(value, row, index) {
		return [ '<a class="edit" href="javascript:void(0)" title="Edit">',
				'<i class="glyphicon glyphicon-edit"></i>', '</a>  ',
				'<a class="remove" href="javascript:void(0)" title="Remove">',
				'<i class="glyphicon glyphicon-remove"></i>', '</a>' ].join('');
	}

	function submitAddSchoolmatesCategoryForm() {
		var formData = new FormData($('#addSchoolmatesCategoryForm')[0]);
		$.ajax({
			url : '/admin/schoolmatesCategory',
			type : 'POST',
			//将formData对象作为参数进行上传
			data : formData,
			contentType : false,
			processData : false,
			success : function(data) {
				$.notify("添加成功", {
					position : 'top center',
					className : 'success'
				});
				$table.bootstrapTable("refresh");
			},
			error : function() {
				$.notify("添加失败", {
					position : 'top center',
					className : 'error'
				});
			}
		})
	}
	function updateSchoolmatesCategoryForm(){
		var id = $("#putSchoolmatesCategoryForm-id").val();
		var name = $("#putSchoolmatesCategoryForm-name").val();
		$.ajax({
			url:'/admin/schoolmatesCategory',
			type:'post',
			data:{
				id:id,
				name:name,
				_method:'put',
			},
			success:function(){
				$.notify("修改成功", {
					position : 'top center',
					className : 'success'
				});
				$('#myModal').modal('hide');
				$table.bootstrapTable("refresh");
				
			},
			error:function(){
				$.notify("修改失败", {
					position : 'top center',
					className : 'error'
				});
				$('#myModal').modal('hide')
			}
		})
	}
</script>